<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table input {
            width: 400px;
        }
        table {
            border-collapse: collapse;
        }
        td {
            width: 100px;
            height: 50px;
            text-align: center;
            border: 1px solid #000;
        }
        .xiu{
            position: absolute;
            left: 40px;
            top: 40px;
            background-color: aqua;
            margin: 100px 200px;
            padding: 50px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="table">
        <h1>表单</h1>
        姓&ensp;&ensp;&ensp;&ensp;名<input class="name" name="name" type="text" placeholder="只能包含数字字母下划线,且数字不能开头,长度在8~16之间"><br>
        联系电话<input class="phone" name="phone" type="text" placeholder="11位,如果格式有错误输入框变红提示"><br>
        学&ensp;&ensp;&ensp;&ensp;历<input name="study" type="text" placeholder="如果校验正确，绿色表示通过"><br>
        年&ensp;&ensp;&ensp;&ensp;龄<input  name="age" type="text"><br>
        期望薪资<input name="money"  type="text"><br>
        <button name="save">保存</button>
        <button name="reset">重置</button>
    </div>
    <div class="table xiu">
        <h1>修改</h1>
        姓&ensp;&ensp;&ensp;&ensp;名<input class="name2"  type="text" placeholder="只能包含数字字母下划线,且数字不能开头,长度在8~16之间"><br>
        联系电话<input class=" phone2"  type="text" placeholder="11位,如果格式有错误输入框变红提示"><br>
        学&ensp;&ensp;&ensp;&ensp;历<input class="study2" type="text" placeholder="如果校验正确，绿色表示通过"><br>
        年&ensp;&ensp;&ensp;&ensp;龄<input class="age2"  type="text"><br>
        期望薪资<input  class="money2" type="text"><br>
        <button  class="bc">保存</button>
        <button name="save2" class="cz">重置</button>
    </div>
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>联系电话</td>
                <td>学历</td>
                <td>年龄</td>
                <td>期望薪资</td>
                <td>删除</td>
                <td>修改</td>
            </tr>
        </thead>
        <tbody></tbody>

    </table>
    <script src="./jquery.min.js"></script>
    <script src="./biaoge.js"></script>
</body>

</html>